<template>
  <div>
    <div class="header">员工考察登记表</div>
    <el-form
      ref="entryApplyForm"
      v-loading="loading"
      :model="entryApplyForm"
      :rules="entryApplyRules"
      label-width="0px"
    >
      <div class="entryTableHeader">
        <table style="width: 90%;">
          <tr>
            <td width="30%" class="departwrapper">
              <el-form-item label="部门:" prop="entry_dep_id" label-width="100px">
                {{ entryApplyForm.entry_dep }}
              </el-form-item>
            </td>
            <td width="30%" class="postwrapper">
              <el-form-item label="岗位:" prop="entry_job" label-width="100px">
                {{ entryApplyForm.entry_job }}
              </el-form-item>
            </td>
            <td width="10%" style="text-align: right;">填表日期：</td>
            <td width="10%">{{ entryApplyForm.created_at | formatDate }}</td>
          </tr>
        </table>
      </div>
      <table class="entryTable" cellspacing="0" cellpadding="0">
        <tr class="firstTr">
          <td width="10%" class="firstTd title">姓名</td>
          <td width="12%">
            <el-form-item prop="name">
              {{ entryApplyForm.name }}
            </el-form-item>
          </td>
          <td width="10%" class="title">性别</td>
          <td width="12%">
            <el-form-item prop="sex">
              {{ entryApplyForm.sex }}
            </el-form-item>
          </td>
          <td width="10%" class="title">出生日期</td>
          <td width="12%">
            <el-form-item prop="birth">
              {{ entryApplyForm.birth }}
            </el-form-item>
          </td>
          <td width="10%" class="title">政治面貌</td>
          <td width="12%">
            <el-form-item prop="political_landspace">
              {{ entryApplyForm.political_landspace }}
            </el-form-item>
          </td>
          <td rowspan="4">
            <el-form-item prop="avatar">
              照片
              <upload-image
                style="margin-left:30px;"
                :cur-image-prop="entryApplyForm.avatar"
                :lt-size-prop="2"
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">籍贯</td>
          <td>
            <el-form-item prop="native_place">
              {{ entryApplyForm.native_place }}
            </el-form-item>
          </td>
          <td class="title">民族</td>
          <td>
            <el-form-item prop="national">
              {{ entryApplyForm.national }}
            </el-form-item>
          </td>
          <td class="title">婚姻情况</td>
          <td>
            <el-form-item prop="marriage">
              {{ entryApplyForm.marriage }}
            </el-form-item>
          </td>
          <td class="title">文化程度</td>
          <td>
            <el-form-item prop="degree">
              {{ entryApplyForm.degree }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">身份证号码</td>
          <td colspan="4">
            <el-form-item prop="id_no">
              {{ entryApplyForm.id_no }}
            </el-form-item>
          </td>
          <td class="title">联系电话</td>
          <td colspan="2">
            <el-form-item prop="mobile">
              {{ entryApplyForm.mobile }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">户籍所在地</td>
          <td colspan="4">
            <el-form-item prop="household_registration">
              {{ entryApplyForm.household_registration }}
            </el-form-item>
          </td>
          <td class="title">紧急联系人电话</td>
          <td colspan="2">
            <el-form-item prop="urgent_phone">
              {{ entryApplyForm.urgent_phone }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">现居住地址</td>
          <td colspan="4">
            <el-form-item prop="home_address">
              {{ entryApplyForm.home_address }}
            </el-form-item>
          </td>
          <td class="title">QQ号码</td>
          <td colspan="3">
            <el-form-item prop="qq">
              {{ entryApplyForm.qq }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td
            class="firstTd title"
            :rowspan="[entryApplyForm.work_experiences != null?entryApplyForm.work_experiences.length+1:1]"
          >
            工作经验
          </td>
          <td colspan="2" class="title">
            起止年月
          </td>
          <td colspan="2" class="title">
            工作单位
          </td>
          <td colspan="2" class="title">
            职位
          </td>
          <td colspan="2" class="title">
            离职原因
          </td>
        </tr>
        <tr v-for="(item) in entryApplyForm.work_experiences">
          <td colspan="2">
            <el-form-item>
              {{ item.start_time }} ~ {{ item.end_time }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.company }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.job }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.leave_reason }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title"
              :rowspan="[entryApplyForm.family_members != null?entryApplyForm.family_members.length+1:1]"
          >
            家族成员
          </td>
          <td colspan="2" class="title">
            姓名
          </td>
          <td colspan="2" class="title">
            工作单位
          </td>
          <td colspan="2" class="title">
            职务
          </td>
          <td colspan="2" class="title">
            电话
          </td>
        </tr>
        <tr v-for="(item,index) in entryApplyForm.family_members">
          <td colspan="2">
            <el-form-item>
              {{ item.name }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.company }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.job }}
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              {{ item.mobile }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            能否接受工作调动
          </td>
          <td colspan="2">
            <el-form-item prop="dispatch">
              {{ entryApplyForm.dispatch ? '是' : '否' }}
            </el-form-item>
          </td>
          <td class="title">
            能否加班
          </td>
          <td colspan="2">
            <el-form-item prop="work_overtime">
              {{ entryApplyForm.work_overtime ? '是' : '否' }}
            </el-form-item>
          </td>
          <td class="title">
            能否出差
          </td>
          <td colspan="2">
            <el-form-item prop="business_trip">
              {{ entryApplyForm.business_trip ? '是' : '否' }}
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title" colspan="2">
            是否曾在我公司应聘
          </td>
          <td colspan="2">
            <el-form-item prop="employed">
              {{ entryApplyForm.employed ? '是' : '否' }}
            </el-form-item>
          </td>
          <td colspan="3" class="title">
            是否有亲属或朋友在我司工作
          </td>
          <td colspan="3">
            <el-form-item prop="employed_friends">
              {{ entryApplyForm.employed_friends ? '是' : '否' }}
              <span v-if="entryApplyForm.employed_friends">({{ entryApplyForm.employed_relatives_friends_name }})</span>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            填表人申明
          </td>
          <td colspan="8" style="text-align:left;">
            <div>1、本人保证所填写资料属实</div>
            <div>2、保证遵守公司各项规章制度</div>
            <div>3、若有不实之处，本人愿意无条件接受公司处罚甚至辞退，并不要求任何补助。</div>
            <div class="sign">申&nbsp;明&nbsp;人：</div>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            入职培训
          </td>
          <td colspan="8" style="text-align:left">
            <div>本人已接受公司岗前及员工规章制度的培训。</div>
            <div class="sign">
              <span>员工签字：</span> <span style="margin-left:150px;"/>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="9" class="firstTd">
            <span style="font-size:20px;font-weight:bold">以下为公司填写</span>
          </td>
        </tr>
        <tr>
          <td class="firstTd title required">
            入编时间
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_entry_date">
              <el-date-picker
                v-model="entryApplyForm.comp_fill_entry_date"
                type="date"
                placeholder="选择入编时间"
                style="width:100%"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </td>
          <td class="title required">
            所属部门
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_belong_dep_id">
              <TreeSelect
                ref="depTreeSelect"
                v-model="entryApplyForm.comp_fill_belong_dep_id"
                :data="departmentList"
                :height="400"
                :popover-width="300"
                default-expand-all
                :default-props="{
                  children: 'children',
                  label: 'name',
                }"
                node-key="id"
              />
            </el-form-item>
          </td>
          <td class="title">
            职务
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_job">
              <el-input
                v-model="entryApplyForm.comp_fill_job"
                placeholder="请输入职务"
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            考察期
          </td>
          <td colspan="2">
            {{ entryApplyForm.comp_fill_probation_start }}&nbsp;~&nbsp;{{ entryApplyForm.comp_fill_probation_end }}
          </td>
          <td class="title">
            考察期工资
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_probation_salary">
              &yen;{{ entryApplyForm.comp_fill_probation_salary }}
            </el-form-item>
          </td>
          <td class="title required">
            入编后工资
          </td>
          <td colspan="2" style="padding: 10px 10px">
            <el-form-item prop="comp_fill_salary" label-width="100px" label="基本工资">
              <el-input v-model="entryApplyForm.comp_fill_salary" placeholder="请输入入编后工资">
                <template slot="prepend">&yen;</template>
              </el-input>
            </el-form-item>
            <el-form-item style="margin-top: 5px" prop="comp_fill_salary_remark" label-width="100px" label="补充说明">
              <el-input v-model="entryApplyForm.comp_fill_salary_remark" placeholder="请输入补充说明">
              </el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title required">
            合同签订时间
          </td>
          <td colspan="2">
            <el-form-item prop="contract_sign_at">
              <el-date-picker
                v-model="entryApplyForm.contract_sign_at"
                type="date"
                placeholder="选择合同签订时间"
                style="width:100%"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </td>
          <td class="title required">
            合同年限
          </td>
          <td colspan="2">
            <el-form-item prop="years">
              <el-date-picker
                v-model="entryApplyForm.years"
                type="daterange"
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </td>
          <td class="title required">
            保密协议签订
          </td>
          <td colspan="2">
            <el-form-item prop="sign_confidentiality_agree">
              <el-radio-group v-model="entryApplyForm.sign_confidentiality_agree">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>

    <div style="text-align: center;margin-bottom: 30px">
      <FlowBtnRow :flow-status="entryApplyForm.flow_status" :can-check="entryApplyForm.can_check"
                  :is-applyer="entryApplyForm.is_applyer" :is-new-data="!entryApplyForm.id"
                  @save="onSave" @submit="onSubmit" @returnBack="onReturnBack" @pass="onPass" @delete="onDelete"
                  @actualDelete="onActualDelete" :flowType="8"
                  :dataId="(params || {}).id || ((params || {}).handle_param || {}).id"
      />
    </div>

  </div>
</template>

<script>
import {
  actualDeleteData,
  deleteData,
  getDetail as getProbationAssessDetails,
  pass as passData,
  returnBack as returnBackData,
  save as saveData,
  saveAndBegin
} from '@/api/personnel/probation_access'
import { formatDateByFmt } from '@/utils/util'
import UploadImage from '@/components/UploadImage'
import { list as getDepartmentList } from '@/api/system/department'
import TreeSelect from '@/components/TreeSelect'
import { Message } from 'element-ui'
import FlowBtnRow from '@/components/FlowBtnRow'

export default {
  name: 'ProbationAssess',
  components: {
    UploadImage,
    TreeSelect,
    FlowBtnRow
  },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  data() {
    return {
      loading: false,
      departmentList: [],
      entryApplyForm: {
        flow_status: 0,
        can_check: false,
        is_applyer: true,
        be_regular: false,
        roster_id: null,
        entry_dep_id: 0,
        entry_job: null,
        created_at: new Date(),
        name: null,
        sex: '男',
        birth: null,
        avatar: null,
        political_landspace: null,
        native_place: null,
        national: null,
        marriage: null,
        degree: null,
        id_no: null,
        mobile: null,
        household_registration: null,
        urgent_phone: null,
        home_address: null,
        work_experiences: [{
          company: null,
          work_date: null,
          start_time: null,
          end_time: null,
          job: null,
          leave_reason: null
        }],
        family_members: [{
          company: null,
          job: null,
          mobile: null,
          name: null
        }],
        dispatch: null,
        work_overtime: null,
        business_trip: null,
        employed: null,
        employed_friends: null,
        employed_relatives_friends_name: null,
        comp_fill_entry_date: null,
        comp_fill_belong_dep_id: null,
        comp_fill_belong_dep: null,
        comp_fill_job: null,
        comp_fill_probation: null,
        comp_fill_probation_salary: null,
        comp_fill_salary_remark: null,
        comp_fill_salary: null,
        sign_confidentiality_agree: null,
        contract_sign_at: null,
        years: []
      },
      entryApplyRules: {
        comp_fill_entry_date: [
          { required: true, message: '请选择入编时间', trigger: ['blur', 'change'] }
        ],
        comp_fill_salary: [
          { required: true, message: '请输入入编后工资', trigger: ['blur', 'change'] }
        ],
        contract_sign_at: [
          { required: true, message: '请选择合同签订时间', trigger: ['blur', 'change'] }
        ],
        years: [
          { required: true, message: '请选择合同年限', trigger: ['blur', 'change'] }
        ],
        sign_confidentiality_agree: [
          { required: true, message: '请选择保密协议签订', trigger: ['blur', 'change'] }
        ]
      },
      params: {}
    }
  },
  mounted() {
    this.getDepartmentList()
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.params = params
    if (params.handle_param && params.handle_param.id) {
      this.getDetails({ id: params.handle_param.id })
    } else {
      this.getDetails({
        id: params.id,
        roster_id: params.roster_id
      })
    }
  },
  methods: {
    getDetails(params) {
      this.loading = true
      return getProbationAssessDetails(params)
        .then(res => {
          if (res.data) {
            this.entryApplyForm = Object.assign({}, this.entryApplyForm, res.data)
            this.entryApplyForm.comp_fill_belong_dep_id = res.data.comp_fill_belong_dep_id
            if (this.entryApplyForm.can_check == null) {
              this.entryApplyForm.can_check = false
            }
            if (this.entryApplyForm.flow_status == null) {
              this.entryApplyForm.flow_status = 0
            }
            if (this.entryApplyForm.years_begin && this.entryApplyForm.years_end) {
              this.entryApplyForm.years = [this.entryApplyForm.years_begin, this.entryApplyForm.years_end]
            }
            this.$refs['depTreeSelect'].checkSelectedNode([this.entryApplyForm.entry_dep_id])
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取部门信息
    getDepartmentList() {
      return getDepartmentList().then(res => {
        this.departmentList = res.data
      })
    },
    // 保存
    onSave() {
      this.$refs.entryApplyForm.validate(valid => {
        if (valid) {
          // 显示loading
          this.loading = true
          this.save(this.getPostData())
        } else {
          // ~ 不通过
          return false
        }
      })
    },
    getPostData() {
      return {
        'id': this.entryApplyForm.id,
        'comp_fill_entry_date': this.entryApplyForm.comp_fill_entry_date,
        'comp_fill_salary': this.entryApplyForm.comp_fill_salary,
        'comp_fill_salary_remark': this.entryApplyForm.comp_fill_salary_remark,
        'contract_sign_at': this.entryApplyForm.contract_sign_at,
        'roster_id': this.entryApplyForm.roster_id,
        'wf_begin_replace_dep_id': this.entryApplyForm.comp_fill_belong_dep_id,
        'sign_confidentiality_agree': this.entryApplyForm.sign_confidentiality_agree,
        'years_begin': formatDateByFmt(this.entryApplyForm.years[0], 'yyyy-MM-dd'),
        'years_end': formatDateByFmt(this.entryApplyForm.years[1], 'yyyy-MM-dd')
      }
    },
    // 保存数据
    save(obj) {
      saveData(obj).then(res => {
        const {
          code,
          message
        } = res
        if (code === 200) {
          Message({
            message,
            type: 'success',
            duration: 1000
          })
          this.detail()
        }
        this.loading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    // 提交
    onSubmit() {
      // 表单校验
      this.$refs.entryApplyForm.validate(valid => {
        // 显示loading
        this.loading = true
        this.submit(this.getPostData())
      })
    },
    // 提交数据
    submit(obj) {
      saveAndBegin(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onPass(opinion) {
      this.loading = true
      passData({ id: this.entryApplyForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onReturnBack(opinion) {
      this.loading = true
      returnBackData({ id: this.entryApplyForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onActualDelete() {
      this.loading = true
      actualDeleteData(this.entryApplyForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onDelete() {
      this.loading = true
      deleteData(this.entryApplyForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">

.entryTableHeader {
  width: 90%;
  height: 50px;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.entryTable {
  width: 90%;
  font-size: 14px;
  margin: 0 auto 30px auto;
}

.entryTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 20px auto;
}

.tip {
  color: red;
}

.textarea-box {
  padding: 10px !important;
}

.follow_table {
  margin-top: 20px;
}

.button_group {
  margin: 20px auto;
  text-align: center;
}

.no_last {
  padding-top: 37px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.error_box {
  margin-bottom: 22px;
}

.button_box {
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

/deep/ .el-dialog__title {
  font-size: 14px;
}

.sign {
  float: right;
  width: 400px;
  text-align: left;
}

.departwrapper /deep/ .el-input__inner,
.postwrapper /deep/ .el-input__inner {
  border: none;
}

.departwrapper /deep/ .el-form-item__label,
.postwrapper /deep/ .el-form-item__label {
  margin-top: 3px;
  color: #000;
}

.required:before {
  content: "*";
  color: #F56C6C;
  margin-right: 4px;
}

.title {
  background: #F5F7FA;
  font-weight: bold;
}

///deep/ .el-input__inner{
//  border: none;
//}
</style>

